<template>
    <div class="box show" v-if="myAudio.data[myAudio.index]">
        <van-tabs v-model="active" 
        background="var(--HESHE)"
        title-active-color="#fff"
        title-inactive-color="#777"
        line-width="0"
        swipeable
        @rendered='rendered'
        animated>
            <van-tab title="歌曲">
                <div class="box-item">
                    <div class="top-img">
                        <van-image
                        width="250"
                        height="250"
                        fit="fill"
                        round
                        :src="myAudio.imgUrl"
                        :class="{img : true,playAM : this.myAudio.isshow}"
                        />
                        <div class="names-like">
                            <p class="textVH">{{myAudio.data[myAudio.index].name}}</p>
                            <p>{{myAudio.data[myAudio.index].artist}}</p>
                        </div>
                    </div>
                    <div class="conter-timi">
                        <div class="xiaotu">
                            <div>
                                <van-icon name="like-o" color="#fff" size="35" v-if="!detail.isLike" @click="like(myAudio.data[myAudio.index])"/>
                                <van-icon name="like" color="#ff7800" size="35" v-if="detail.isLike" @click="like(myAudio.data[myAudio.index])"/>
                            </div>
                        </div>
                        <div class="tiao-box">
                            <div class="jdtiao" ref="p_all">
                                <div ref="tiao"></div>
                                <div ref="yuan" @touchend.prevent="touchend" @touchmove.prevent="touchmove" @touchstart.prevent="touchstart"></div>
                            </div>
                            <div class="text-timi">
                                <div>{{dangtimi}}</div>
                                <div>{{myAudio.data[myAudio.index].songTimeMinutes}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom-play">
                        <div :class="'p bboffshi' + myAudio.bofIndex" @click="onBof" style="transform: scale(0.8)"></div>
                        <div class="p shang" @click="sunPlay(-1)"></div>
                        <div>
                            <van-icon size="38" name="pause-circle-o" @click="onPlay" v-if="this.myAudio.isshow"/>
                            <van-icon size="38" name="play-circle-o" @click="onPlay" v-if="!this.myAudio.isshow"/>
                        </div>
                        <div class="p xia" @click="sunPlay(1)"></div>
                        <div class="p lieb2" @click="MyListShow"></div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="歌词">
                <div class="box-item">
                    <div class="names-like">
                        <p class="textVH">{{myAudio.data[myAudio.index].name}}</p>
                        <p>{{myAudio.data[myAudio.index].artist}}</p>
                    </div>
                    <div class="lineLyric" ref="lineLyrics">
                        <template v-if="myAudio.gec && myAudio.gec.length > 0">
                            <p v-for="(item,index) in myAudio.gec" :key="index" :class="{h : index == MyDateil.gecIndex - 1}" 
                            @click="qiegec(index,item.time)">
                                {{item.lineLyric}}
                                <span v-show="index == MyDateil.gecIndex - 1">{{timifrom(item.time)}}</span>
                            </p>
                        </template>
                        <template v-else>
                            <div>该歌曲暂无歌词</div>
                        </template>
                    </div>
                    <div class="xia-box">
                        <div class="p shang" @click="sunPlay(-1)"></div>
                        <div>
                            <van-icon size="38" name="pause-circle-o" @click="onPlay" v-if="this.myAudio.isshow"/>
                            <van-icon size="38" name="play-circle-o" @click="onPlay" v-if="!this.myAudio.isshow"/>
                        </div>
                        <div class="p xia" @click="sunPlay(1)"></div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
        <div class="guanbi" @click="notShow">X</div>
    </div>
</template>

<script>
import { Tab, Tabs } from 'vant';
import { mapMutations, mapState } from 'vuex'
import { ArrIndexOf, timifrom } from '@/assets/js/Tools'
import { addLike, delLike } from '@/api/songLink.js'
import { getSongDetail } from '@/api/song'
export default {
    name : 'Details',
    components : {
        [Tab.name] : Tab,
        [Tabs.name] : Tabs,
    },
    data() {
        return {
            startX : 0,//
            audio : null,
            active : '',//
            now_long : 0,//
            w : document.body.clientWidth * 0.8,//进度条的宽度
            dangtimi : '00:00',//计算过后的歌曲播放时间
            lineLyricsHeight : 300,
            detail : {}
        }
    },
    created(){
        this.$bus.$on('onBfAudio', this.onBfAudio)
        this.$bus.$on('onsWitchAudio', this.onsWitchAudio)
        this.$bus.$on('pushDetail',this.getDetail)
        this.getDetail()
    },
    beforeDestroy(){
        this.$bus.$off('onBfAudio')
        this.$bus.$off('onsWitchAudio')
    },
    mounted(){
        this.$nextTick(()=>{
            this.audio = this.myAudio.audio
        })
    },
    methods : {
        timifrom,
        ...mapMutations(['onBof', 'onPlay', 'sunPlay']),


        getDetail(){
            getSongDetail(this.myAudio.data[this.myAudio.index].rid).then(res => {
                if(res.code == 200){
                    this.detail = res.data
                }
            })
        },


        notShow(){
            this.$router.isBack = true
            this.$router.back(-1);
        },

        //打开歌曲列表
        MyListShow(){
            document.documentElement.style.overflowY = 'hidden';//禁止底层的div滚动
            this.MyList.isshow = true
        },

        // 更新函数
        onBfAudio(){
            this.now_long = this.myAudio.$currentRate * this.w;
            this.tb(this.now_long);
            this.dangtimi = this.timifrom(this.myAudio.currentTime);

            //更新歌词位置
            if(this.myAudio.gec.length > this.MyDateil.gecIndex){
                if(parseInt(this.myAudio.gec[this.MyDateil.gecIndex].time) < this.myAudio.currentTime){
                    this.MyDateil.gecIndex++;
                    if(this.$refs.lineLyrics){
                        this.srcollT(this.MyDateil.gecIndex * 35 - this.lineLyricsHeight * 0.5);
                    }
                }
            }
        },

        //滚动条过度动画
        srcollT(child1){
            let i = 0;
            let d = setInterval(() => {
                if(this.$refs.lineLyrics.scrollTop < child1 && i < 450) {
                    this.$refs.lineLyrics.scrollTop+=2;
                    i++
                } else {
                    clearInterval(d);
                }
            }, 5);
        },

        
        tb(now_long){
            this.$refs.yuan.style.left = now_long + 'px';
            this.$refs.tiao.style.width = now_long + 'px';
        },

        //触摸时发生
        touchstart(e){
            e.preventDefault();
            var touch = e.touches[0]
            this.startX = touch.pageX;
            this.audio.pause()
        },

        //移动时发生touchmove
        touchmove(e){
            e.preventDefault();
            var touch = e.touches[0];
            var widthBar = this.now_long + touch.pageX - this.startX;//差值，滑动的距离值
            if(widthBar < this.w && widthBar > 0){
                this.tb(widthBar);
            }
            // // 当前的换算后的时间
            var yu = widthBar / this.w * this.audio.duration;//当前蓝色宽度 / 总宽度 * 现在的位置
            this.dangtimi = this.timifrom(yu);
        },


        // 离开时发生
        touchend(e){
            e.preventDefault();
            this.now_long = parseInt(this.$refs.yuan.style.left);//获取左边边距
            var currentTime = (parseInt(this.$refs.yuan.style.left.replace("px","")) / (this.w - 10) * this.audio.duration);
            this.audio.play()
            this.audio.currentTime = currentTime - 8
            this.jsWord(this.audio.currentTime);
        },

        
        //切换歌词播放的位置
        jsWord(currentTime){
            for(let i = 0;i < this.geclength;i++){
                if(this.myAudio.gec[i + 1]){
                    if(parseInt(this.myAudio.gec[i].time) < currentTime && parseInt(this.myAudio.gec[i + 1].time) > currentTime){
                        this.MyDateil.gecIndex = i;
                        if(this.$refs.lineLyrics){
                            this.$refs.lineLyrics.scrollTop = this.MyDateil.gecIndex * 35 - this.lineLyricsHeight * 0.5;
                        }
                        return
                    }
                }else{
                    this.MyDateil.gecIndex = this.geclength;
                    if(this.$refs.lineLyrics){
                        this.$refs.lineLyrics.scrollTop = this.MyDateil.gecIndex * 35 - this.lineLyricsHeight * 0.5;
                    }
                }
            }
        },

        //当tab页面首次被加载时触发
        rendered(name){
            if(name == 1){
                //获取歌词
                this.lineLyricsHeight = this.$refs.lineLyrics.offsetHeight
                this.jsWord(this.audio.currentTime)
            }
        },

        //点击歌词切换播放进度
        qiegec(index,time){
            this.audio.currentTime = time
            this.MyDateil.gecIndex = index;
            this.$refs.lineLyrics.scrollTop = this.MyDateil.gecIndex * 35 - this.lineLyricsHeight * 0.5;
        },

        //喜欢
        like(item){
            const Rid = [item.rid];
            if(!this.detail.isLike){
                addLike({
                    rid:Rid,
                    type:'like'
                }).then(res=>{
                    if(res.code==200){
                        this.$Toast("添加成功!")
                        this.detail.isLike = true;
                    }else{
                    }
                })
            }else{
                delLike({
                    rid:Rid,
                    type:'like'
                }).then(res=>{
                    if(res.code == 200){
                        this.$Toast("取消成功!");
                        this.detail.isLike = false;
                    }
                })
            }
        },
        //收藏
        star(item){
            if(this.isstar){
                this.$Toast.success("收藏成功")
            }else{
                this.$Toast.success("取消收藏")
            }
        },
    },
    //计算属性
    computed:{
        ...mapState(['myAudio', 'MyDateil', 'MyList'])
    },
}
</script>

<style scoped>
    .box{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        z-index: 980;
        transition: height 0.3s;
        background: #090023;
        color: #fff;
    }

    .box >>> .van-tabs__wrap {
        display: flex;
        justify-content: center;
    }
    .box >>> .van-tabs__nav {
        width: 40%;
    }

    .show{
        height: 100vh;
    }
    .notShow{
        height: 0vh;
    }
    .guanbi{
        position: absolute;
        top: 3px;
        left: 5px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .box-item{
        position: relative;
        width: 100%;
        height: calc(100vh - 44px);
        text-align: center;
    }
    .box-item .top-img{
        width: 100%;
        display: flex;
        padding: 25px 0;
        align-items: center;
        flex-direction: column;
    }
    .box-item .top-img .names-like{
        padding: 20px 0;
        height: 80px;
        width: 100%;
        text-align: center;
    }
    .names-like p{
        line-height: 25px;
    }
    .names-like p:nth-child(1){
        font-size: 18px;
    }
    .names-like p:nth-child(2){
        font-size: 13px;
        color: rgb(169, 152, 142);
    }
    .conter-timi{
        position: relative;
        width: 100%;
        height: calc(100vh - 564px);
    }
    .bottom-play{
        position: relative;
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .bottom-play>div{
        height: 40px;
        width: 40px;
        margin: 0 12px;
    }
    .play{
        transform: scale(1.5);
    }
    .lieb2{
        transform: scale(0.75);
        background: url('../../../assets/img/lieb2.png');
        background-size: 100% 100%;
    }
    .lineLyric{
        width: 100%;
        height: calc(100% - 120px);
        overflow-y: scroll;
        line-height: 35px;
        margin-bottom: 10px;
        font-size: 9px;
    }
    .lineLyric>p{
        transition: all 0.5s;
    }
    .lineLyric>p>span{
        margin-left: 10px;
        opacity: 0.3;
        font-size: 7px;
    }
    .lineLyric>.h{
        font-size: 15px;
        color: #f60;
    }
    .xia-box{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .xia-box>div{
        margin: 0 20px;
        height: 40px;
        width: 40px;
    }
    .xiaotu{
        position: relative;
        left: 10%;
        width: 80vw;
        height: 50px;
        display: flex;
        justify-content: center;
    }
    .xiaotu>div{
        margin: 0 20px;
    }
    .tiao-box{
        position: relative;
        left: 10%;
        width: 80vw;
    }
    .jdtiao{
        position: relative;
        width: 100%;
        height: 3px;
        background: #333;
        margin-bottom: 10px;
    }
    .jdtiao>div:nth-child(1){
        position: absolute;
        left: 0;
        height: 100%;
        background: #0ff;
    }
    .jdtiao>div:nth-child(2){
        position: relative;
        top: -5px;
        width: 15px;
        height: 15px;
        background: #fff;
        border-radius: 50%;
    }
    .text-timi{
        position: relative;
        font-size: 8px;
    }
    .text-timi>div:nth-child(1){
        float: left;
    }
    .text-timi>div:nth-child(2){
        float: right;
    }
</style>